Blog tutorial page
Log in
Xt blog css classes demonstration
Showing posts tagged Test tag
Test post one
129months ago
This is the first test post
Test post two
129months ago
The second test post
Back to posts
Upload it to your site by 'remote server' option from
http://xtblogcss.xtgem.com/blog_classes_demo.css
and add this to the page header
/*Blog css classes demonstration This is NOT a template it is a demonstration stylesheet for the blog classes To use this stylesheet upload it (by remote server option)from http://xtblogcss.xtgem.com/blog_classes_demo.css create a blank page containing just a blog function disable the _header , _footer , xtgem_template , global_stylesheet from the page options and add a link to this stylesheet
The number in brackets indicates which section contains the classes for that portion of the blog function */ .xt_container:after {content: "[0]";} .xt_blog_parent:before {content: "[1]";} .xt_list:before {content: "[2]";} .xt_pagination:before {content: "[3]";} .xt_blog_search:before {content: "[4]";} .xt_blog:before {content: "[5]";} .xt_blog_comments:before {content: "[6]";} .xt_blog_write_a_comment:before {content: "[7]";} /* CONTAINER CLASS [0] This class is used in multiple areas of the blog and is also the standard container class */ .xt_container { background:silver; margin:3px auto; padding:3px; border:1px dotted red; max-width:900px; } .xt_container .xt_blog_back_to_posts { border:2px dashed black } .xt_container .xt_button { background:white; } .xt_container .xt_link { margin:3px; text-decoration:none; } /* OUTER HOLDER CLASS [1] xt_blog_parent */ .xt_blog_parent { border:1px dotted black; background:#e0f4ff; max-width:800px; margin:1em auto } /* POST LIST CLASSES [2] xt_list xt_blog_post_list xt_item xt_blog_title_link xt_heading xt_blog_entry_time xt_blog_comments_number arrow xt_description */ .xt_list { margin:3px; border:1px solid aqua; } .xt_blog_post_list { margin:3px; border:1px solid black; } .xt_item { margin:3px; padding:4px; border:1px solid fuchsia; } .xt_blog_title_link { margin:3px; padding:3px; border:1px solid gray; text-decoration:none; display:inline-block; } .xt_heading { border:1px solid green; padding:1px; display:inline-block; } .xt_blog_entry_time { font-size:.75em; border:1px solid indigo; color:black; display:inline-block; } .xt_blog_comments_number { border:1px solid lime; } .arrow { content:url("/bullet_blue.png"); display:inline-block; } .xt_list .xt_description { margin:3px; border:1px solid maroon; display:block; } .xt_list .xt_description img { margin:3px; padding:3px; border:1px solid navy; max-width:32px ; /*Makes the image into a thumbnail*/ vertical-align:bottom; display:inline-block; } /* PAGINATION CLASSES [3] xt_pagination selected */ .xt_pagination { margin:3px; padding:3px; border:1px solid maroon; } .xt_pagination .selected span { margin:3px; border:1px solid black; } .xt_pagination span a { text-decoration:none; } .xt_pagination span a span { margin:3px; border:1px solid fuchsia; } /* SEARCH FORM CLASSES [4] xt_container xt_blog_search xt_blog_search_form xt_input xt_submit xt_button */ .xt_blog_search { margin:3px; padding:3px; border:1px solid red; } .xt_blog_search_form { margin:3px; padding:3px; border:1px solid black; } .xt_blog_search_form .xt_input { margin:3px; padding:3px; border:1px solid fuchsia; } .xt_blog_search_form .xt_input input[type="text"] { border:2px dashed green; } .xt_blog_search_form .xt_submit { margin:3px; padding:3px; border:1px solid lime; } .xt_blog_search_form .xt_submit .xt_button { border:2px dashed maroon; } /* POSTS CLASSES [5] xt_blog xt_tags xt_blog_title xt_blog_subtitle xt_blog_content xt_blog_entry_date xt_text small xt_blog_back_to_posts xt_link xt_button */ .xt_blog { margin:3px; border:1px solid black } .xt_tags { margin:3px; padding:3px; border:1px solid blue } .xt_tags a { border:1px solid fuchsia; text-decoration:none } .xt_blog_title { margin:3px; border:1px solid gray } .xt_blog_subtitle { margin:3px; border:1px solid lime; } .xt_blog_content { margin:3px; padding:3px; border:1px solid maroon; } .xt_blog_content p { display:inline-block; margin:0; padding:0; } .xt_blog_entry_date { margin:3px; border:1px solid navy; } .xt_blog .xt_button { margin:3px; border:2px dashed black } .xt_blog .xt_blog_back_to_posts { background:gray; } /* COMMENTS CLASSES [6] xt_blog_comments xt_blog_comments_title xt_blog_comment xt_reply xt_blog_comment_date xt_blog_comment_author xt_blog_comment_author_admin xt_blog_comment_content xt_blog_comment_actions xt_blog_comment_action_reply xt_blog_comment_action_report_spam xt_button xt_link */ .xt_blog_comments { margin:3px; padding:3px; border:1px solid olive; } .xt_blog_comments_title { margin:3px; border:1px solid orange; display:block; } .xt_blog_comment { margin:3px; padding:3px; border:1px solid purple; } .xt_reply { margin:5px 6px; } .xt_blog_comment_date { border:1px solid red; margin:3px; display:inline-block; } .xt_blog_comment_author { border:1px solid silver; margin:3px; display:inline-block; } .xt_blog_comment_author_admin /*ADMIN REPLY CLASS*/ { border:3px double red; color:maroon; } .xt_blog_comment_content { border:1px solid teal; margin:3px; padding:3px; } .xt_blog_comment_content p { border:1px solid orange; margin:0; } .xt_blog_comment_actions { margin:3px; padding:3px; border:1px solid black; } .xt_blog_comment_action_reply { border:1px solid blue; text-decoration:none; display:inline-block; } .xt_blog_comment_action_report_spam { border:1px solid fuchsia; text-decoration:none; display:inline-block; } .xt_blog_comments .xt_button { margin:3px; border:1px solid black } /* COMMENT FORM CLASSES [7] xt_blog_write_a_comment xt_blog_write_a_comment_title xt_label xt_input xt_textarea xt_submit xt_button */ .xt_blog_write_a_comment { margin:3px; padding:3px; border:1px solid gray; } .xt_blog_write_a_comment_title { border:1px solid lime; display:block; } .xt_blog_write_a_comment .xt_label { margin:3px; padding:3px; border:1px solid maroon; } .xt_blog_write_a_comment .xt_input { margin:3px; padding:3px; border:1px solid olive; } .xt_blog_write_a_comment .xt_input input[type="text"] { border:2px dashed green; } .xt_blog_write_a_comment .xt_textarea { margin:3px; padding:3px; border:1px solid olive; } .xt_blog_write_a_comment .xt_textarea textarea { border:2px dashed green; } .xt_blog_write_a_comment .xt_submit { margin:3px; padding:3px; border:1px solid orange; } .xt_blog_write_a_comment .xt_submit .xt_button { border:2px dashed orange; background:purple; color:white }